<div class="tabbable">
    <div class="tab-style">
        <ul class="nav nav-tabs tab-ul">
            <li class="active"><a href="#compute" data-toggle="tab">用户管理</a></li>
            <li class="pull-right bookmark">
                <button class="btn btn-info" ng-click="add_bookmark()">存为书签</button>
            </li>
        </ul>
    </div>

    <div class="tab-content">
        <div id="compute" class="tab-pane active" style="padding:0px 10px">
            <div class="row-fluid">
                <div class="span9">
                    <div class="btn-toolbar server-btn-toolbar ui-toolbar">
                        <div class="btn-group">
                            <button class="btn btn-mini" ng-click="do_add()" >添加</button>
                            <button class="btn btn-mini" ng-click="do_edit()" ng-disabled="!selected_user">修改</button>
                            <button class="btn btn-danger btn-mini" ng-click="do_delete()"  ng-disabled="!selected_user">删除</button>
                        </div>

                        <div class="btn-group">
                            <button class="btn btn-mini" ng-click="do_import()">导入</button>
                            <input type="file" ng-file-select="onFileSelect($files)" class="hidden">
                            <a class="btn btn-mini" target="_blank" href="/api/users/export_users?token={{ token }}" ng-disabled="!token">导出</a>


                        </div>
                        <div class="btn-group">
                            <button class="btn btn-mini" ng-click="do_close()" >停用</button>
                            <button class="btn btn-mini" ng-click="do_open()" >启用</button>


                        </div>
                        <div class="btn-group">
                            <button class="btn btn-mini" ng-click="do_attach_vm()" ng-disabled="!selected_user">分配</button>
                        </div>
                    </div>
                </div>
                <div class="span3">
                    <span>每页显示</span>
                    <select class="input-mini" ng-model="page_size" ng-options="pz for pz in page_sizes"
                            ng-change="change(page_size)">
                    </select>
                    <span>条</span>
                </div>
            </div>
            <div>
                <table class="table table-striped table-bordered table-condensed" tableorder="users">
                    <thead>
                    <tr>
                        <th><input type="checkbox" ng-model="selected_all"/></th>
                        <th by='username'>用户名</th>
                        <th>组织</th>
                        <th>电话</th>
                        <th by="last_login">最后登陆时间</th>
                        <th>最后登陆IP</th>
                        <th by="created_at">创建时间</th>
                        <th by="instance_set.length">实例个数</th>
                        <th by="status">状态</th>
                        <th>登录实例</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr selectable="user" ng-repeat="user in users|activeitem|orderBy:orderfield:reverse" ng-click="select()" >
                        <td><input type="checkbox" value="{{ template.id }}" ng-model="selected[user.id]"/></td>
                        <td>{{ user.username }}</td>
                        <td>
                            {{ user.organize }}
                        </td>
                        <td>{{ user.phone }}</td>
                        <td>{{ user.last_login |date:'yyyy-MM-dd HH:mm:ss Z' }}</td>
                        <td>{{ user.last_login_ip }}</td>
                        <td>{{ user.created_at|date:'yyyy-MM-dd HH:mm:ss Z' }}</td>
                        <td>{{ user.instance_set.length }}</td>

                        <td>
                            <img ng-src="/static/images/user/{{ user.status }}.png" alt=""/>{{ user.status|userstatus }}
                            </td>
                        <td>{{ user.vm_used }}</td>
                    </tr>
                    </tbody>
                </table>
                <div class="pagination">
                    <ul>
                        <li ng-hide="should_hide()" ng-class="prev_class" ng-click="prev()"><a
                                href="javascript:void(0);">上一页</a></li>
                        <li ng-repeat="i in [] | range:page_count()" ng-hide="should_hide()" ng-click="page(i)"
                            ng-class="(i == current_page) && 'active'">
                            <a href="javascript:void(0)">{{ i + 1}}</a>
                        </li>
                        <li ng-hide="should_hide()" ng-class="next_class" ng-click="next()"><a
                                href="javascript:void(0);">下一页</a></li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
</div>